import {
  BreadcrumbsSeparatorExample,
  BreadcrumbsStyleExample,
  BreadcrumbsThemeExample,
  BreadcrumbsWithDropdownExample,
  ComposableBreadcrumbsExample,
  CustomSeparatorExample,
  CustomSeparatorIconExample,
  DefaultBreadcrumbsExample,
  NextBreadcrumbsExample,
  NoSeparatorExample,
} from './examples'

import { ComponentStyleDisplay } from '@/components/ComponentStyleDisplay'
import { Example, ExampleCode } from '@/components/Example'
import ThemeExample from '@/components/ThemeExample.mdx'


## Usage

Import the `Breadcrumbs` component and and render individual `Breadcrumbs.Item`s with a `Breadcrumbs.Link` inside. The current breadcrumb should use the `isCurrent` prop which sets the appropriate aria attributes.

<Example>
  <DefaultBreadcrumbsExample />
  
  <ExampleCode>
  ```jsx file=./examples/DefaultBreadcrumbsExample.tsx
  ```
  </ExampleCode>
</Example>


### Custom separator

You can customize the separator between breadcrumb links with the `separator` prop.

<Example>
  <CustomSeparatorExample />
  
  <ExampleCode>
  ```jsx file=./examples/CustomSeparatorExample.tsx
  ```
  </ExampleCode>
</Example>

### Custom separator with icon

<Example>
  <CustomSeparatorIconExample />
  
  <ExampleCode>
  ```jsx file=./examples/CustomSeparatorIconExample.tsx
  ```
  </ExampleCode>
</Example>


### No separator

<Example>
  <NoSeparatorExample />
  
  <ExampleCode>
  ```jsx file=./examples/NoSeparatorExample.tsx
  ```
  </ExampleCode>
</Example>

## Composable

The sub-components of the Breadcrumbs component are exposed so you can compose the Breadcrumbs however you want. With the composable API you can full control over what is rendered and unlock more advanced use-cases. 

* `<Breadcrumbs.Container>`
* `<Breadcrumbs.Item>`
* `<Breadcrumbs.Link>`
* `<Breadcrumbs.Separator>`

### Beginning and ending separator

<Example>
  <ComposableBreadcrumbsExample />
  
  <ExampleCode>
  ```jsx file=./examples/ComposableBreadcrumbsExample.tsx
  ```
  </ExampleCode>
</Example>

### NextJS

You can use Breacrumbs with NextJS's Link component and `useRouter` to automatically generate the breadcrumbs based on the current path.

<Example>
  <NextBreadcrumbsExample />
  
  <ExampleCode>
  ```jsx file=./examples/NextBreadcrumbsExample.tsx
  ```
  </ExampleCode>
</Example>

### With dropdown

<Example>
  <BreadcrumbsWithDropdownExample />
  
  <ExampleCode>
  ```jsx file=./examples/BreadcrumbsWithDropdownExample.tsx
  ```
  </ExampleCode>
</Example>

## Styling

<ThemeExample component="Breadcrumbs">
<Example>
  <BreadcrumbsThemeExample />
  
  <ExampleCode>
  ```jsx file=./examples/BreadcrumbsThemeExample.tsx
  ```
  </ExampleCode>
</Example>
</ThemeExample>

### Target classes

<ComponentStyleDisplay componentName="Breadcrumbs" />

### Global styling

To override styling on all Breadcrumbs components, you can set Amplify CSS variables or use the target classes like `.amplify-breadcrumbs` class.

<Example>
  <ExampleCode>
    ```css
    /* styles.css */
    .amplify-breadcrumbs {
      background-color: pink;
    }
    ```
  </ExampleCode>
</Example>

### Local styling

To override styling on a specific Breadcrumbs component or sub-component, you can use (in order of increasing specificity): a class selector and style props.

_Using a class selector:_

<Example>
  <ExampleCode>
    ```jsx
    <Breadcrumbs className="my-breadcrumbs">
    </Breadcrumbs>
    ```
  
    ```css
    /* styles.css */
    .my-breadcrumbs {
       background-color: pink;
    }
    ```
  </ExampleCode>
</Example>

_Using style props:_

<Example>
  <BreadcrumbsStyleExample />
  
  <ExampleCode>
  ```jsx file=./examples/BreadcrumbsStyleExample.tsx
  ```
  </ExampleCode>
</Example>

## Accessibility

https://www.w3.org/WAI/ARIA/apg/patterns/breadcrumb/

* The Breadcrumbs component is a `nav` element to let browsers know it is for navigation, with `aria-label="Breadcrumbs"` to identify it as breadcrumbs
* The list of links is rendered in an ordered list, `ol`
* Separators have `aria-hidden="true"` so they are not announced by screen readers
* Use the `isCurrent` prop for the current element in the navigation which sets `aria-current="page"` and `aria-disabled="true"` on the link. 
